<template>
	<view>
		<view class="tbgoff" :style="tittleInfo?`height:${tittleInfo.height}px`:''">
		</view>
		<view id="tittleBar" :class="{'tittleBar_bg':noShowbackgroundImage}">
			<view v-if="!menuButton" class="status_bar"></view>
			<view class="searchBar"
				:style="menuButton?`height:${menuButton.height}px;margin-top:${menuButton.top}px`:''">
				<view class="searchBox" :style="menuButton?`border-radius:${menuButton.height/2}px;`:''"
					@click="toSearch">
					<view> <uni-icons type="search" size="45rpx"
							:color="noShowbackgroundImage?'#333':'#ffffff'"></uni-icons></view>
					<swiper class="searchPush" vertical autoplay :interval="5000" :duration="200"
						:style="menuButton?`height:${menuButton.height}px;`:''" :disable-touch="true" circular>
						<swiper-item v-for="(s,index) in pageinfo['_'+pageindex]" :key="index">
							<view class="searchPush_item" :style="menuButton?`height:${menuButton.height}px;`:''">
								<p>
									{{s.vod_name}}
								</p>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view v-if="showH5Tips==0" style="padding-left: 20rpx;" @click="toHistry">
					<uv-icon name="clock" :color="noShowbackgroundImage?'#333':'#ffffff'" size="45rpx"></uv-icon>
				</view>
				<view :style="menuButton?`width:calc(10rpx + ${menuButton.width}px)`:''"></view>
			</view>
			<uv-tabs :list="classTab" lineWidth="30" lineColor="rgba(0,0,0,0)" :activeStyle="{
						color: noShowbackgroundImage?`#000`:'#fff',
						fontWeight: 'bold',
						transform: 'scale(1.05)',
						fontSize:'35rpx'
			    	}" :inactiveStyle="{ 
						color: noShowbackgroundImage?`#333`:'#eee',
						transform: 'scale(1)',
						fontSize:'32rpx'
					}" itemStyle="padding:30rpx 20rpx 30rpx" @change="(i)=>{pageindex=i.index}" :current="pageindex">
			</uv-tabs>
		</view>

		<swiper :duration="300" class="swiperPage" :current="pageindex" skip-hidden-item-layout
			@change="(e)=>{pageindex=e.detail.current}">
			<swiper-item>
				<view class="swiperPage">
					<view class="bg_img" :class="{bg_img_no:noShowbackgroundImage}" style="z-index: -1;">
						<z-swiper ref="zSwiper" v-model="swiper" :options="{effect: 'fade'}">
							<z-swiper-item v-for="(s,index) in swiper" :key="index">
								<view class="swiper_item">
									<image webp='true' lazy-load class="bg_img" style="filter: blur(20rpx);"
										:src="s.vod_img" mode="aspectFill"></image>
								</view>
							</z-swiper-item>
						</z-swiper>
					</view>
					<scroll-view scroll-y="true" class="scrollPage" @scrolltolower="scrolltolower" @scroll="listScroll">
						<view id="fakerTittleBar" :style="tittleInfo?`height:${tittleInfo.height}px`:''"></view>
						<view class="uni-margin-wrap">
							<view>
								<swiper :autoplay="true" :interval="8000" :duration="500" circular
									easing-function="easeInOutCubic" class="swiper_item"
									@change="(e)=>{onChange(e.detail.current);}">
									<swiper-item v-for="(s,index) in swiper" :key="index" v-if="swiper"
										@click="toInfoPage(s)">
										<view class="swiper_item">
											<image :webp='true' lazy-load style="height: 100%;width: 100%;"
												:src="s.vod_img" mode="aspectFill"></image>
											<view class="swiperShowItem">
												<view>
													<span style="font-size: 30rpx;">{{s.vod_name}}</span>
													<span style="padding: 0 10rpx;">|</span>
													<span style="font-size: 25rpx;">{{s.vod_info}}</span>
												</view>
											</view>
										</view>
									</swiper-item>
									<swiper-item v-else>
										<view class="swiper_item">
											<uv-skeleton avatarSize="100vw" :loading="!swiper" avatar
												avatarShape="square" :title="false">
											</uv-skeleton>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
						<!-- <view
							style="display: flex;justify-content: space-between;align-items: center;padding:20rpx 30rpx;">
							<span style="font-size: 35rpx;color: #333;font-weight: 600;">最近更新</span>
							<span style="color: #aaa;font-size: 28rpx;">查看更多 <uni-icons type="forward" size="35rpx"
									color="#aaa"></uni-icons></span>
						</view> -->

						<view class="vList" v-if="pageinfo['_0']">
							<view class="vListItem" v-for="(v,index) in pageinfo['_0']" :key="index"
								@click="toInfoPage(v)">
								<image lazy-load class="itemImage" :src="v.vod_pic" mode="aspectFill"></image>
								<view class="itemInfo">
									<p class="itemIns">{{v.vod_class}}</p>
									<p class="itemTittle">{{v.vod_name}}</p>
								</view>
							</view>
						</view>
						<view v-else class="vList">
							<view class="vListItem" v-for="(v,index) in 20" :key="index">
								<uv-skeleton avatarSize="45vw" :loading="true" avatar avatarShape="square">
								</uv-skeleton>
							</view>
						</view>
						<uv-load-more :status="loadMore" />
						<view style="height: 50rpx;"></view>
					</scroll-view>
				</view>
			</swiper-item>

			<swiper-item v-for="(l,i1) in classTab" :key="i1" v-if="i1!=0">
				<view class="swiperPage">
					<scroll-view scroll-y="true" class="scrollPage" @scrolltolower="scrolltolower">
						<view :style="tittleInfo?`height:${tittleInfo.height}px`:''"></view>
						<view class="vList" v-if="pageinfo['_'+i1]">
							<view class="vListItem" v-for="(v,index) in pageinfo['_'+i1]" :key="index"
								@click="toInfoPage(v)">
								<image lazy-load class="itemImage" :src="v.vod_pic" mode="aspectFill">
									<view class="itemInfo">
										<p class="itemIns">{{v.vod_class}}</p>
										<p class="itemTittle">{{v.vod_name}}</p>
									</view>
							</view>
						</view>
						<view v-else class="vList">
							<view class="vListItem" v-for="(v,index) in 20" :key="index">
								<uv-skeleton avatarSize="45vw" :loading="true" avatar avatarShape="square">
								</uv-skeleton>
							</view>
						</view>
						<uv-load-more :status="loadMore" line />
						<view style="height: 50rpx;"></view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<view v-if="showH5Tips==1"
			style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 999;">
			<view
				style="position: absolute;left: 0;bottom: 0;width: 100%;background: #fff;border-radius: 30rpx 30rpx 0 0;padding: 30rpx;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="font-size: 30rpx;color: #666;">
						打开方式
					</view>
					<view @click="showH5Tips=2" style="font-size: 25rpx;display: flex;align-items: center;color: #aaa;">
						继续使用浏览器<uni-icons type="forward" size="35rpx" color="#aaa"></uni-icons>
					</view>
				</view>
				<view style="display: flex;align-items: center;margin-top: 20rpx;">
					<image style="height: 120rpx;width: 120rpx;flex-shrink: 0;" src="@/static/logo.png" mode=""></image>
					<view style="width: 100%;padding-left: 20rpx;">
						<view style="font-size: 35rpx;font-weight: bold;">面视频</view>
						<view style="font-size: 25rpx;color: #666;">体验更流畅，更多的功能</view>
					</view>
					<view style="flex-shrink: 0;">
						<uv-button text="打开APP" shape="square " @click="toAPP"
							color="linear-gradient(to right, rgb(3, 200, 212), rgb(3, 200, 212))"></uv-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showH5Tips==2" @click="toAPP"
			style="position: fixed;bottom: 60rpx;left: 50%;transform: translateX(-50%);box-sizing: border-box;">
			<view
				style="background:linear-gradient(to right, rgb(3, 200, 212), rgb(2, 220, 231));border-radius: 80rpx;padding:8rpx 20rpx;box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;">
				<view style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 60rpx;height: 60rpx;flex-shrink: 0;" src="../../static/logo.png" mode="">
					</image>
					<view style="flex-shrink: 0;font-size: 25rpx;color: #fff;padding-left: 10rpx;">打开APP享受更好的体验</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/api.js'
	export default {
		data() {
			return {
				node: "",
				swiper: null,
				menuButton: null,
				tittleInfo: null,
				noShowbackgroundImage: 0,
				timerID: null,
				pageindex: 0,
				classTab: [{
					name: "."
				}],
				pageinfo: {},
				showH5Tips: 0,
				loadMore: 'loadmore'
			}
		},
		watch: {
			pageindex(i) {
				let this_ = this
				if (!this_.pageinfo[`_${i}`]) {
					api.getList({
						count: 20,
						page: 0,
						type_id: this.classTab[i].type_id,
						orderType: '2'
					}).then(res => {
						this_.pageinfo[`_${i}`] = res.data.data.list
					})
				}
			},
			showH5Tips(v) {
				if (v > 0) uni.hideTabBar()
				// else uni.showTabBar()
			}
		},
		onLoad() {
			//#ifdef H5
			this.showH5Tips = 1
			//#endif 

			//各平台适配
			//#ifndef APP-PLUS || H5
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			console.log(this.menuButton)
			//#endif 

			let this_ = this
			api.getClass().then(res => {
				let list = res.data.data
				let data = []
				for (let v of list) {
					data.push({
						type_id: v.type_id,
						name: v.type_name,
						page: 0
					})
				}
				this.classTab = data

				api.getSwiper(list[0].type_id)
					.then(res => {
						this.swiper = res.data.data
					})

				api.getList({
					count: 18,
					page: 0,
					type_id: list[0].type_id,
					orderType: '2'
				}).then(res => {
					this_.pageinfo['_0'] = res.data.data.list
				})
			})

			//#ifdef APP-PLUS || H5
			uni.preloadPage({
				url: "/pages/mine/mine"
			});
			//#endif
		},
		onReady() {
			const query = uni.createSelectorQuery();
			query.select('#tittleBar').boundingClientRect(data => {
				if (data)
					this.tittleInfo = data
			}).exec();

			setTimeout(() => {
				//#ifdef APP-PLUS
				api.configGet({
					key: 'version'
				}).then(res => {
					if (parseInt(res.data.data) > plus.runtime.versionCode)
						uni.navigateTo({
							url: '/pages/update/update?ver='+res.data.data
						})
				})
				//#endif
			}, 2000)
		},
		onShow() {
			//用timer实现tittler动画效果
			this.timerID = setInterval(() => {
				const query = uni.createSelectorQuery();
				query.select('#tittleBar').boundingClientRect(data => {
					if (data)
						this.tittleInfo = data
				}).exec();
				if (this.pageindex == 0) {
					query.select('#fakerTittleBar').boundingClientRect(data => {
						if (data)
							this.noShowbackgroundImage = -data.top >= 5
					}).exec();
				} else {
					this.noShowbackgroundImage = true
				}

			}, 1000 / 15)
		},
		onHide() {
			if (this.timerID) {
				clearInterval(this.timerID)
				this.timerID = null
			}
		},
		methods: {
			listScroll(e) {

			},
			toAPP() {
				uni.navigateTo({
					url: '/pages/toAPP/toAPP'
				})
			},
			scrolltolower() {
				let this_ = this
				if (this_.pageinfo['_' + this.pageindex].page == -1) return
				this.classTab[this.pageindex].page = this.classTab[this.pageindex].page + 1
				let page = this.classTab[this.pageindex].page
				let t = this.classTab[this.pageindex].type_id
				this.loadMore = 'loading'
				api.getList({
					count: 18,
					page: page,
					type_id: t,
					orderType: '2'
				}).then(res_ => {
					let res = res_.data.data.list
					if (res.length == 0) {
						this.loadMore = 'nomore'
						// uni.showToast({
						// 	title: '没有更多了',
						// 	duration: 2000,
						// 	icon: 'error'
						// });
						this_.pageinfo['_' + this.pageindex].page = -1
						return
					}
					this.loadMore = 'loadmore'
					this_.pageinfo['_' + this.pageindex] = this_.pageinfo['_' + this.pageindex].concat(res)
				})
			},
			toHistry() {
				//跳转播放
				uni.navigateTo({
					url: '/pages/playHistry/playHistry'
				})
			},
			toInfoPage(e) {
				//跳转播放
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id=' + e.vod_id
				})
			},
			onChange(index) {
				//背景效果实现
				this.$refs.zSwiper.swiper.slideTo(index)
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="less">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.uni-margin-wrap {
		width: calc(100vw - 60rpx);
		margin: 0 30rpx 20rpx;

		>view {
			border-radius: 20rpx;
			overflow: hidden;
			z-index: 99;
		}
	}

	.swiper_item {
		width: 100%;
		height: calc(100vw * 0.52);
	}

	.swiperShowItem {
		position: absolute;
		bottom: 0rpx;
		padding: 30rpx 10rpx 10rpx;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 255));
		width: 100%;

		>view {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: aliceblue;
			width: calc(100vw - 40rpx - 20rpx);
		}
	}

	.bg_img {
		position: fixed;
		/* top: -5vw; */
		/* left: -10vw; */
		top: -2vw;
		left: -10vw;
		size: 5;
		width: 140vw;
		opacity: 1;
		transition: 0.2s;
		height: 70vw;
	}

	.bg_img .swiper_item {
		width: 140vw;
		height: 70vw;
	}

	.bg_img::after {
		content: "";
		display: block;
		height: 40vw;
		width: 140vw;
		position: absolute;
		bottom: 0;
		background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 255));
		z-index: 1;
	}

	.searchBar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		overflow: hidden;
		height: 60rpx;
		margin-top: 30rpx;
		width: 100vw;
		overflow: hidden;
	}

	.searchBar>view {
		flex-shrink: 0;
	}

	.searchBox {
		background: rgba(255, 255, 255, 0.4);
		border-radius: 30rpx;
		width: 100%;
		height: 100%;
		flex-shrink: 1 !important;
		display: flex;
		align-items: center;
		color: aliceblue;
		padding: 0 15rpx;
		transition: 0.2s;
	}

	.searchPush {
		width: 100%;
		height: 60rpx;
	}

	.searchPush_item {
		width: 50vw;
		color: #fff;
		font-size: 30rpx;
		padding: 0 0 0 10rpx;
		display: flex;
		align-items: center;
		transition: 0.2s;
		height: 60rpx;
		
		
		>p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	/* .vList {
		width: calc(100vw - 60rpx);
		columns: 2;
		column-gap: 20rpx;
		margin: 0 30rpx;
	} */

	/* .vListItem {
		width: 100%;
		break-inside: avoid;
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;
	} */

	.vList {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.vListItem {
		width: calc(calc(50% - 7rpx * 2) * 2 / 3 - 7rpx);
		margin: 7rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;
	}

	.itemImage {
		width: calc(50vw * 2 / 3);
		height: calc(65vw * 2 / 3);
	}

	.itemInfo {
		position: absolute;
		padding: 10rpx 10rpx;
		bottom: 0;
		color: aliceblue;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 255));
		width: 100%;
		padding-top: 40px;
	}

	.itemTittle {
		font-weight: 800;
		font-size: 25rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 90%;
	}

	.itemIns {
		width: 90%;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5rpx;
	}

	.scrollPage {
		height: 100vh;
	}

	.tittleBar_bg {
		background: rgba(255, 255, 255, 255) !important;
		width: 100%;
		transition: 0.2s;
	}

	.tittleBar_bg .searchPush_item {
		color: #333;
		transition: 0.2s;
	}

	.tittleBar_bg .searchBox {
		background: #eee;
		transition: 0.2s;
	}

	#tittleBar {
		background: rgba(255, 255, 255, 0);
		width: 100vw;
		z-index: 99;
		position: fixed;
		top: 0;
	}

	.bg_img_no {
		opacity: 0;
		transition: 0.2s;
	}

	.swiperPage {
		height: 100vh;
		// height: 100%;
		width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.tbgoff {
		background: linear-gradient(rgba(120, 120, 120, 255), rgba(120, 120, 120, 0));
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
	}
</style>